@import '../../color.less';

.keyboard-content {
  height: 45vh;
  box-sizing: border-box;
  .formula{
    height: 8vh;
    box-sizing: border-box;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    .col{
      padding: 0 20rpx;
      margin: 0 10rpx;
      height: 6vh;
      min-width: 30rpx;
      line-height: 6vh;
      border-radius: 10rpx;
      font-size: 40rpx;
      border: 1rpx solid @color2;
      &:last-of-type{
        background: @color2;
      }
    }
  }
  .keyboard{
    height: 37vh;
    box-sizing: border-box;
    display: flex;
    flex-direction: row;
    .col, .row{
      box-sizing: border-box;
      display: flex;
      justify-content: center;
    }
    .btn{
      display: flex;
      justify-content: center;
      align-items: center;
      border: 2rpx solid #ccc;
      border-right: none;
      border-bottom: none;
      font-size: 40rpx;
      &:active{
        background: #ccc;
        color: #fff;
      }
    }
    .row{
      flex-direction: row;
      flex: 1;
    }
    .col{
      flex-direction: column;
      flex: 1;
    }
  }
}
